<!DOCTYPE html>	
<html>	
<head>	
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>	
    <title>文章中心</title>
    <script type="text/javascript" src="../script/api.js"></script>	
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>	
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>	
    <style>	
        body, html {	
        }	
	
        .header {	
            display: -webkit-box;	
            display: -webkit-flex;	
            display: flex;	
        }	
        .title {	
            -webkit-box-flex: 1;	
            -webkit-flex: 1;	
            flex: 1;	
        }	
	
        .login-header a {	
            padding: 30px;	
            background-size: 50px;	
        }	
        .index-header a,.detail-header a{	
            display: block;	
            background-size: 30px;	
            padding: 20px;	
        }	
        .header a{	
            background-repeat: no-repeat;	
            background-position: center;	
        }	
        .close {	
            background-image: url("../image/close_icon_normal@2x.png");	
        }	
	
        .setting {	
            background-image: url("../image/setting_icon_normal@2x.png");	
        }	
	
        .login-header .nologin-user {	
            -webkit-transform: rotateY(0deg);	
            background-image: url("../image/user_defaulthead@2x.png");	
        }	
	
	
        .login-header {	
            height: 100%;	
            background-color: #6ab494;	
        }	
	
        .title {	
            text-align: center;	
            padding-top: 15px;	
            display: -webkit-box;	
            display: -webkit-flex;	
            display: flex;	
            -webkit-box-orient: vertical;	
            -webkit-flex-flow: column;	
            flex-flow: column;	
        }	
	
        .login {	
            color: #323237;	
            font-size: 18px;	
        }	
	
	
        .mine {	
            background-color: #6ab494;	
            padding-top: 5px;	
        }	
	
        .mine li, .bottom li {	
            display: inline-block;	
            width: 32%;	
            text-align: center;	
            padding: 20px 0 6px;	
            background-size: 30px;	
            background-repeat: no-repeat;	
            background-position: top;	
        }	
	
        .bottom li {	
            width: 18.89%;	
            background-size: 30px;	
        }	
	
        .mine li a {	
            margin: 15px 10px 0 10px;	
            color: #323237;	
        }	
	
        .bottom li a {	
            margin: 15px 10px 0 10px;	
            color: #737377;	
            font-size: 12px;	
        }	
	
        .read {	
            background-image: url("../image/user_reading_circle@2x.png");	
        }	
	
        .star {	
            background-image: url("../image/user_favor_circle@2x.png");	
        }	
	
        .comment {	
            background-image: url("../image/user_comment_circle@2x.png");	
        }	
	
        .activity {	
            margin: 0 10px;	
        }	
	
        .activity li {	
            padding: 15px 0;	
            background-size: 8px;	
            background-repeat: no-repeat;	
            background-position: right;	
            background-image: url("../image/setting_cell_arrow@2x.png");	
            border-bottom: 1px solid #F6F6F6;	
        }	
        li {	
        	list-style:none;
            padding: 15px 0;	
            background-size: 8px;	
            background-repeat: no-repeat;	
            background-position: right;	
            	
            border-bottom: 1px solid #F6F6F6;	
        }
        li a{ color:#F8285C;
        		font-size: 16px;	
            margin-left: 10px;
        }
	
        .activity li:last-child {	
            border-bottom: none;	
        }	
	
        .subtitle {	
            font-size: 16px;	
            margin-left: 10px;	
        }	
	
        .tag {	
            color: #FFFFFF;	
            padding: 2px;	
            font-size: 13px;	
            border-radius: 2px;	
        }	
	
        .a1 {	
            background-color: #FB000D;	
        }	
	
        .a2 {	
            background-color: #2CA6E6;	
        }	
	
        .a3 {	
            background-color: #FC5E48;	
        }	
	
        .a4 {	
            background-color: #04BC6F;	
        }	
	
        .plugin {	
            background-image: url("../image/plugin_icon_setting@2x.png");	
        }	
	
        .offline {	
            background-image: url("../image/pluginboard_icon_offline@2x.png");	
        }	
	
        .night {	
            background-image: url("../image/pluginboard_icon_night@2x.png");	
        }	
	
        .search {	
            background-image: url("../image/pluginboard_icon_search@2x.png");	
        }	
	
        .more {	
            background-image: url("../image/pluginboard_icon_more@2x.png");	
        }	
    </style>	
</head>	
<body>	
<li><a href="#" onclick="aboutus('aboutus.html');">关于我们</a></li>


		
<ul class="activity" id='txtNewsList'>	
    	
    
</ul>	
	
</body>	



<script>
apiready = function() {
    initPage();
    //pull to refresh
    api.setRefreshHeaderInfo({
        visible: true,
        // loadingImgae: 'wgt://image/refresh-white.png',
        bgColor: '#f2f2f2',
        textColor: '#4d4d4d',
        textDown: '下拉刷新...',
        textUp: '松开刷新...',
        showTime: true
    }, function(ret, err){
    	initPage();
    });
};

function initPage(){
	api.showProgress({
        title: '加载中...',
        modal: false
    });
    var html = '';
    api.ajax({
	    url:'http://www.chaoxindong.com/index.php?m=api&a=article',
	    dataType: 'json'
    },function(ret,err){
        if (ret) {
            var obj = $api.byId('txtNewsList');
            for (var i = 0, len = ret.length; i < len; i++) {
            	var thisItem = ret[i];
            	var nType = thisItem.type;
            	//html += '<li><a  class="list"  onclick="abc(' +thisItem.id+ ');">';
            	//html += '<div class="content">'+ thisItem.title.substr(0,18) +'<p>作者'+ thisItem.author
            	//		+ '</p></div></a></li>';
            	html += '<li >';	
			    html +=     '<span class="a1 tag">'+thisItem.author+'</span>';	
			    html +=     '<a onclick="abc(' +thisItem.id+ ');" ><span class="subtitle">'+thisItem.title.substr(0,10)+'</span></a>';	
			    html += '</li>';
            }
			$api.html(obj, html);
			api.hideProgress();
			api.refreshHeaderLoadDone();
        } else {
           	alert(JSON.stringify(err));
           	api.hideProgress();
        }
    });
    
}
function abc(el){
	api.openWin({
        name: 'name',
        url: 'act_view.html?ID='+el,
        opaque: true,
        vScrollBarEnabled: false
   	 });
   	 	}; 
function aboutus(el,newurl){
	//var pageParam = api.pageParam; //比如: {"name" : "tans-con"}
	api.openWin({
		pageParam : {
			   "newurl" : newurl,
			  },
        name: 'name',
        url: el,
        opaque: true,
        vScrollBarEnabled: false,
        
   	 });
   	 	}; 
</script>
</html>	
